<template>
  <div class="detail-page-pane">
    <el-row :gutter="10">
      <el-alert
        v-if="getInfoFaile"
        title="获取数据失败"
        type="error"
        show-icon>
      </el-alert>
      <template v-else-if="twoPane">
        <el-col v-bind="leftColProps">
          <div class="page-module-pane">
            <slot></slot>
          </div>
        </el-col>
        <el-col v-bind="rightColProps">
          <div class="page-module-pane">
            <slot name="right"></slot>
          </div>
        </el-col>
      </template>
      <div v-else class="page-module-pane clearfix">
        <el-col v-bind="leftColProps">
          <slot></slot>
        </el-col>
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    getInfoFaile: Boolean,
    twoPane: Boolean,
    span: {
      type: [Number, Object],
      default: 18
    }
  },
  computed: {
    leftColProps () {
      const { span } = this
      return typeof span === 'number' ? { span } : span
    },
    rightColProps () {
      const { span } = this
      if (typeof span === 'number') {
        return { span: 24 - span }
      }
      let props = {}
      for (let i in span) {
        props[i] = 24 - span[i]
      }
      return props
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-page-pane {
  .page-module-pane {
    @include page-module-pane;
  }
}
</style>
